<template>
  <Head title="我的优惠券" />
  <ShopLayout>
    <div class="bg-gray-100 min-h-screen">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题 -->
        <div class="mb-8">
          <h1 class="text-3xl font-bold text-gray-900">我的优惠券</h1>
          <p class="mt-2 text-sm text-gray-600">管理您的优惠券，享受购物优惠</p>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div class="bg-white rounded-xl shadow-sm p-6 text-center border border-gray-200">
            <div class="text-2xl font-bold text-gray-900">{{ stats.total }}</div>
            <div class="text-sm text-gray-600">总计</div>
          </div>
          <div class="bg-white rounded-xl shadow-sm p-6 text-center border border-gray-200">
            <div class="text-2xl font-bold text-green-600">{{ stats.unused }}</div>
            <div class="text-sm text-gray-600">未使用</div>
          </div>
          <div class="bg-white rounded-xl shadow-sm p-6 text-center border border-gray-200">
            <div class="text-2xl font-bold text-blue-600">{{ stats.used }}</div>
            <div class="text-sm text-gray-600">已使用</div>
          </div>
          <div class="bg-white rounded-xl shadow-sm p-6 text-center border border-gray-200">
            <div class="text-2xl font-bold text-red-600">{{ stats.expired }}</div>
            <div class="text-sm text-gray-600">已过期</div>
          </div>
        </div>

        <!-- Tab切换 -->
        <div class="bg-white rounded-xl shadow-sm mb-8 border border-gray-200">
          <div class="border-b border-gray-200">
            <nav class="flex space-x-8 px-6">
              <button
                v-for="tab in tabs"
                :key="tab.key"
                @click="switchTab(tab.key)"
                :class="[
                  'py-4 px-1 border-b-2 font-medium text-sm transition-colors',
                  currentTab === tab.key
                    ? 'border-gray-900 text-gray-900'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                ]"
              >
                {{ tab.label }}
                <span v-if="tab.count !== undefined" class="ml-2 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">
                  {{ tab.count }}
                </span>
              </button>
            </nav>
          </div>
        </div>

        <!-- 优惠券列表 -->
        <div v-if="userCoupons.data.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <CouponCard
            v-for="userCoupon in userCoupons.data"
            :key="userCoupon.id"
            :coupon="userCoupon.coupon"
            :user-coupon="userCoupon"
            :status="getStatus(userCoupon)"
            :expire-at="userCoupon.expire_at"
            action-type="use"
            :show-action="userCoupon.status === 'unused'"
            @use="handleUse"
          />
        </div>

        <!-- 空状态 -->
        <div v-else class="text-center py-20">
          <svg class="w-24 h-24 mx-auto mb-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-12" />
          </svg>
          <h3 class="text-xl font-medium text-gray-900 mb-2">
            {{ getEmptyMessage() }}
          </h3>
          <p class="text-gray-500 mb-6">
            {{ getEmptyDescription() }}
          </p>
          <button 
            @click="goToCoupons"
            class="px-6 py-3 bg-orange-500 text-white rounded-xl hover:bg-orange-600 transition-colors"
          >
            去领取优惠券
          </button>
        </div>

        <!-- 分页 -->
        <div v-if="userCoupons.data.length > 0" class="mt-8 flex justify-center">
          <Pagination :links="userCoupons.links" />
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Head, router } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'
import CouponCard from '@/Components/CouponCard.vue'
import Pagination from '@/Components/Pagination.vue'

const props = defineProps({
  userCoupons: Object,
  status: String,
  stats: Object
})

const currentTab = ref(props.status || 'unused')

const tabs = computed(() => [
  { key: 'unused', label: '未使用', count: props.stats.unused },
  { key: 'used', label: '已使用', count: props.stats.used },
  { key: 'expired', label: '已过期', count: props.stats.expired }
])

// 获取优惠券状态
const getStatus = (userCoupon) => {
  if (userCoupon.status === 'used') return 'used'
  if (userCoupon.status === 'expired') return 'expired'
  
  // 检查是否已过期
  if (userCoupon.expire_at && new Date(userCoupon.expire_at) < new Date()) {
    return 'expired'
  }
  
  return 'unused'
}

// 获取空状态消息
const getEmptyMessage = () => {
  switch (currentTab.value) {
    case 'unused':
      return '暂无未使用的优惠券'
    case 'used':
      return '暂无已使用的优惠券'
    case 'expired':
      return '暂无已过期的优惠券'
    default:
      return '暂无优惠券'
  }
}

// 获取空状态描述
const getEmptyDescription = () => {
  switch (currentTab.value) {
    case 'unused':
      return '快去领取一些优惠券吧'
    case 'used':
      return '您还没有使用过任何优惠券'
    case 'expired':
      return '您没有过期的优惠券'
    default:
      return '快去领取一些优惠券吧'
  }
}

// 处理使用优惠券
const handleUse = (userCouponId) => {
  // 跳转到购物车或商品页面
  router.visit(route('cart'))
}

// 跳转到优惠券中心
const goToCoupons = () => {
  router.visit(route('coupons.index'))
}

// 切换Tab
const switchTab = (tabKey) => {
  currentTab.value = tabKey
  router.get(route('coupons.my'), { status: tabKey }, {
    preserveState: false,
    replace: true
  })
}
</script>
